import React, { Component } from 'react'
import {Button, DatePicker, Form, Input, InputNumber, Modal, Row, Col} from "antd";
import PropTypes from 'prop-types'
import moment from 'moment'
import { InputOpenWin } from '../../widgets'

const FormItem = Form.Item;

class EditFormNormal extends Component {
    static propTypes = {
        title: PropTypes.string,
        fields: PropTypes.array.isRequired,
        onClose: PropTypes.func.isRequired,
        onSave: PropTypes.func.isRequired,
        initData: PropTypes.object,
        readOnly: PropTypes.bool
    }

    getField(field) {
        const props = {}
        if(field.display !== undefined) {
            props['display'] = field.display
        }
        if(this.props.readOnly) {
            props['readOnly'] = true
        }
        if(field.type == 'textarea'){
            props['type'] = 'textarea'
        }
        if(field.type == 'number') {
            return ( <InputNumber {...props} /> )
        } else if(field.type == 'date') {
            return (
                <DatePicker { ...props } />
            )
        } else {
            return <Input {...props} />
        }
    }


    getFieldDecorator(field, form, initData) {
        let initV = initData[field.key]
        if(field.type == 'date') {
            initV = moment(initV)
        }
        if(field.componentFunc !== undefined) {
            return field.componentFunc({
                form: form,
                field: field,
                initVal: initV
            })
        }
        return form.getFieldDecorator(field.key, {
            initialValue: initV,
            rules: [{required: (field.required) || false, message: (field.requiredMsg || '')}]
        })(
            this.getField(field)
        )
    }

    getFields() {
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 6 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 14 },
            },
        };

        const initData = this.props.initData || {}
        const fields = this.props.fields || [];
        const children = [];
        for (let i = 0; i < fields.length; i++) {
            const field = fields[i]
            children.push(
                <Col key={i} span={12}>
                    <FormItem {...formItemLayout} label={field.label}>
                        {
                            this.getFieldDecorator(field, this.props.form , initData)
                        }
                    </FormItem>
                </Col>
            );
        }
        return children;
    }

    render = () => {
        let additional = {}
        if(this.props.readOnly) {
            additional.footer =  [
                <Button key="back" size="large" onClick={this.props.onClose}>关闭</Button>
            ]
        }
        return (
            <Modal
                maskClosable={false}
                visible={true}
                width={800}
                title={this.props.title || '编辑'}
                okText="保存"
                onCancel={this.props.onClose}
                onOk={this.save}
                { ...additional }
            >
                <Form layout="horizontal">
                    <Row>
                        {
                            this.getFields()
                        }
                    </Row>
                </Form>
            </Modal>
        )
    }

    save = (e) => {
        if(this.props.readOnly) {
            return false;
        }
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                let postD = Object.assign({}, this.props.initData, values)
                this.props.onSave(postD)
            } else {
                console.log(err)
            }
        });
    }
}

export default Form.create()(EditFormNormal);
